<template>
  <view class="container">
    <!-- Logo -->
    <image src="/static/logo.png" class="logo" mode="aspectFit"></image>
    <!-- 标题 -->
    <text class="title">找回密码</text>
    <!-- 输入框 -->
    <view class="input-container">
      <view class="input-item">
        <text class="input-label">手机号</text>
        <input class="input" v-model="phone" placeholder="请输入手机号" />
      </view>
      <view class="input-item">
        <text class="input-label">验证码</text>
        <input class="input" v-model="code" placeholder="请输入验证码" />
        <!-- 获取验证码按钮 -->
        <button
          class="get-code-btn"
          :disabled="isCounting"
          @click="handleGetCode"
        >
          {{ countdown > 0 ? `${countdown} 秒后重新发送` : '获取验证码' }}
        </button>
      </view>
      <view class="input-item">
        <text class="input-label">新密码</text>
        <input :type="showNewPassword ? 'text' : 'password'" class="input" v-model="newPassword" placeholder="请输入新密码" />
        <!-- 眼睛图标按钮 -->
        <uni-icons :type="showNewPassword ? 'eye-slash' : 'eye'" size="20" color="#999" @click="toggleNewPassword"></uni-icons>
      </view>
    </view>
    <!-- 提交按钮 -->
    <button class="submit-btn" @click="handleSubmit">提交</button>
  </view>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { resetPassword} from '@/api/login';

export default defineComponent({
  setup() {
    // 定义 ref 变量，用于绑定输入框的值
    const phone = ref('');
    const code = ref('');
    const newPassword = ref('');

    // 定义 ref 变量，控制新密码的显示状态
    const showNewPassword = ref(false);

    // 定义 ref 变量，用于倒计时
    const countdown = ref(0);
    const isCounting = ref(false);

    // 切换新密码的显示状态
    const toggleNewPassword = () => {
      showNewPassword.value = !showNewPassword.value;
    };

    // 获取验证码
    const handleGetCode = async () => {
      // 验证手机号
      if (!phone.value) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
        });
        return;
      }
      if (!/^\d{11}$/.test(phone.value)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none',
        });
        return;
      }

      // 调用获取验证码 API
      try {
        const res = await getVerificationCode(phone.value);
        if (res.code === 200) {
          uni.showToast({
            title: '验证码已发送',
            icon: 'none',
          });

          // 开始倒计时
          startCountdown();
        } else {
          uni.showToast({
            title: res.message || '验证码发送失败',
            icon: 'none',
          });
        }
      } catch (error) {
        uni.showToast({
          title: '验证码发送失败，请重试',
          icon: 'none',
        });
      }
    };

    // 开始倒计时
    const startCountdown = () => {
      countdown.value = 60;
      isCounting.value = true;
      const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value === 0) {
          clearInterval(timer);
          isCounting.value = false;
        }
      }, 1000);
    };

    // 提交表单
    const handleSubmit = async () => {
      // 输入验证
      if (!phone.value) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
        });
        return;
      }
      if (!/^\d{11}$/.test(phone.value)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none',
        });
        return;
      }
      if (!code.value) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none',
        });
        return;
      }
      if (!newPassword.value) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none',
        });
        return;
      }

      try {
        // 调用 API 重置密码
        const res = await resetPassword(phone.value, code.value, newPassword.value);
        if (res.code === 200) {
          uni.showToast({
            title: '密码重置成功',
            icon: 'none',
          });

          // 跳转到登录页面
          uni.navigateTo({
            url: '/pages/login/index', // 改为您的登录页面路径
          });
        } else {
          uni.showToast({
            title: res.message || '密码重置失败',
            icon: 'none',
          });
        }
      } catch (error) {
        uni.showToast({
          title: '密码重置失败',
          icon: 'none',
        });
      }
    };

    return {
      phone,
      code,
      newPassword,
      showNewPassword,
      countdown,
      isCounting,
      toggleNewPassword,
      handleGetCode,
      handleSubmit,
    };
  },
});
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.logo {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 50px;
}

.input-container {
  width: 95%; /* 调整宽度为 90% */
}

.input-item {
  display: flex;
  align-items: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-bottom: -1px; /* 共享边框 */
  background-color: white; /* 背景色 */
  padding: 0 10px; /* 内边距 */
}

.input-label {
  font-size: 14px;
  color: #333;
  width: 60px; /* 提示词宽度 */
}

.input {
  flex: 1;
  height: 40px;
  border: none; /* 去掉输入框边框 */
  font-size: 14px; /* 与提示词大小一致 */
  padding-left: 10px; /* 左边距 */
}

.input-item:first-child {
  border-top: 1px solid #ccc; /* 第一个输入框保留上边框 */
}

.input-item:last-child {
  border-bottom: 1px solid #ccc; /* 最后一个输入框保留下边框 */
}

.get-code-btn {
  font-size: 12px;
  color:white;
  
  background-color: #3ab54a;
  border: none;
  margin-left: 10px;
  padding: 0;
}

.get-code-btn:disabled {
  color: #999;
}

.submit-btn {
  width: 60%; /* 调整宽度 */
  height: 40px;
  background-color: #3ab54a;
  color: white;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  margin-top: 50px;
}
</style>
